<!doctype html>
<html>		
		<head>
			<meta charset="utf-8">
			<link rel="stylesheet" href="css/bootstrap.css">
		</head>
		<body>
			<br/>
			<!-- 响应式布局 -->
			<div class="table-responsive">
			    <table class="table table-bordered table-striped">
			      <thead>
			        <tr>
			          <th></th>
			          <th>
			            超小屏幕
			            <small>手机 (&lt;768px)</small>
			          </th>
			          <th>
			            小屏幕
			            <small>平板 (≥768px)</small>
			          </th>
			          <th>
			            中等屏幕
			            <small>桌面显示器 (≥992px)</small>
			          </th>
			          <th>
			            大屏幕
			            <small>大桌面显示器 (≥1200px)</small>
			          </th>
			        </tr>
			      </thead>
			      <tbody>
			        <tr>
			          <th class="text-nowrap">栅格系统行为</th>
			          <td>总是水平排列</td>
			          <td colspan="3">开始是堆叠在一起的，当大于这些阈值时将变为水平排列C</td>
			        </tr>
			        <tr>
			          <th class="text-nowrap"><code>.container</code> 最大宽度</th>
			          <td>None （自动）</td>
			          <td>750px</td>
			          <td>970px</td>
			          <td>1170px</td>
			        </tr>
			        <tr>
			          <th class="text-nowrap">类前缀</th>
			          <td><code>.col-xs-</code></td>
			          <td><code>.col-sm-</code></td>
			          <td><code>.col-md-</code></td>
			          <td><code>.col-lg-</code></td>
			        </tr>
			        <tr>
			          <th class="text-nowrap">列（column）数</th>
			          <td colspan="4">12</td>
			        </tr>
			        <tr>
			          <th class="text-nowrap">最大列（column）宽</th>
			          <td class="text-muted">自动</td>
			          <td>~62px</td>
			          <td>~81px</td>
			          <td>~97px</td>
			        </tr>
			        <tr>
			          <th class="text-nowrap">槽（gutter）宽</th>
			          <td colspan="4">30px （每列左右均有 15px）</td>
			        </tr>
			        <tr>
			          <th class="text-nowrap">可嵌套</th>
			          <td colspan="4">是</td>
			        </tr>
			        <tr>
			          <th class="text-nowrap">偏移（Offsets）</th>
			          <td colspan="4">是</td>
			        </tr>
			        <tr>
			          <th class="text-nowrap">列排序</th>
			          <td colspan="4">是</td>
			        </tr>
			      </tbody>
			    </table>
			  </div>
			  <br/>
			  <!-- 将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。 -->
			<div class="container-fluid bg-primary">
				<div class="row">
				  <div class="col-md-1">.col-md-1</div>
				  <div class="col-md-1">.col-md-1</div>
				  <div class="col-md-1">.col-md-1</div>
				  <div class="col-md-1">.col-md-1</div>
				  <div class="col-md-1">.col-md-1</div>
				  <div class="col-md-1">.col-md-1</div>
				  <div class="col-md-1">.col-md-1</div>
				  <div class="col-md-1">.col-md-1</div>
				  <div class="col-md-1">.col-md-1</div>
				  <div class="col-md-1">.col-md-1</div>
				  <div class="col-md-1">.col-md-1</div>
				  <div class="col-md-1">.col-md-1</div>
				</div>
			</div>
			<br/>
			 <!-- 使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。 -->
			<div class="container">
				<div class="row bg-primary">
				  <div class="col-md-1">.col-md-1</div>
				  <div class="col-md-1">.col-md-1</div>
				  <div class="col-md-1">.col-md-1</div>
				  <div class="col-md-1">.col-md-1</div>
				  <div class="col-md-1">.col-md-1</div>
				  <div class="col-md-1">.col-md-1</div>
				  <div class="col-md-1">.col-md-1</div>
				  <div class="col-md-1">.col-md-1</div>
				  <div class="col-md-1">.col-md-1</div>
				  <div class="col-md-1">.col-md-1</div>
				  <div class="col-md-1">.col-md-1</div>
				  <div class="col-md-1">.col-md-1</div>
				</div>
				<!-- 实例：移动设备和桌面屏幕
				是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即 .col-xs-* 和 .col-md-*。请看下面的实例，研究一下这些是如何工作的。在上面案例的基础上，通过使用针对平板设备的 .col-sm-* 类，我们来创建更加动态和强大的布局吧。 -->
				<div class="row bg-success">
				  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
				  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
				</div>
				<div class="row bg-info">
				  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
				  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
				  Optional: clear the XS cols if their content doesn't match in height
				  <div class="clearfix visible-xs-block"></div>
				  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
				</div>
				<br/>
				<!-- 列偏移 -->
				<!-- 使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。 -->
				<div class="row">
				  <div class="col-md-4 bg-warning">.col-md-4</div>
				  <div class="col-md-4 col-md-offset-4 bg-warning">.col-md-4 .col-md-offset-4</div>
				</div>
				<div class="row">
				  <div class="col-md-3 col-md-offset-3 bg-danger">.col-md-3 .col-md-offset-3</div>
				  <div class="col-md-3 col-md-offset-3 bg-danger">.col-md-3 .col-md-offset-3</div>
				</div>
				<div class="row">
				  <div class="col-md-6 col-md-offset-3 bg-primary">.col-md-6 .col-md-offset-3</div>
				</div>
				<br/>
				<!-- 嵌套列 -->
				<!-- 为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。 -->
				<div class="row bg-danger">
				  <div class="col-sm-9">
				    Level 1: .col-sm-9
				    <div class="row">
				      <div class="col-xs-8 col-sm-6 bg-info">
				        Level 2: .col-xs-8 .col-sm-6
				      </div>
				      <div class="col-xs-4 col-sm-6 bg-info">
				        Level 2: .col-xs-4 .col-sm-6
				      </div>
				    </div>
				  </div>
				</div>
				<br/>
				<!-- 列排序 -->
				<!-- 通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。 -->
				<div class="row">
				  <div class="col-md-9 col-md-push-3 bg-danger">.col-md-9 .col-md-push-3</div>
				  <div class="col-md-3 col-md-pull-9 bg-success">.col-md-3 .col-md-pull-9</div>
				</div>

			</div>
			<br/>
		</body>
</html>
